<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="match" href="text-transform-ref.html">
</head>
<body style="text-transform: uppercase;">
  <span>this text should be upper-case.</span><br />

  <input type="text" value="this text should be lower-case."><br />

  <select>
    <option>this text should be lower-case.</option>
  </select><br />
  <select multiple>
    <option>this text should be lower-case.</option>
  </select><br />
  <select multiple>
    <optgroup label="this text should be lower-case.">
      <option>this text should be lower-case.</option>
    </optgroup>
  </select><br />

  <select style="text-transform: uppercase;">
    <option>this text should be upper-case.</option>
  </select><br />
  <select multiple style="text-transform: uppercase;">
    <option>this text should be upper-case.</option>
  </select><br />
  <select multiple style="text-transform: uppercase;">
    <optgroup label="this text should be upper-case.">
      <option>this text should be upper-case.</option>
    </optgroup>
  </select><br />

  <button>this text should be lower-case.</button><br />

  <textarea>this text should be lower-case.</textarea><br />
</body>
</html>
